<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab切换</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
        }
        main{
            width: 400px;
            flex-direction: column;
            position: relative;
            margin-right: 20px;
        }
        main nav{
            display: flex;
            height: 50px;
            align-items: center;
        }
        main nav a{
            background: #95a5a6;
            margin-right: px;
            padding: 10px 20px;
            border: 1px solid #333333;
            text-decoration: none;
        }
        main nav a:first-of-type{
            background: #e67e22;
        }
        /*面板的样式*/
        section{
            height: 200px;
            width: 100%;
            background: #f1c40f;
            position: absolute;
            font-size: 5em;
            display: none;
        }
        section:first-of-type{
            display: block;
        }
        section:nth-child(even){
            background: #27ae60;
        }
    </style>
</head>
<body>
    <main class="tab1">
        <nav>
            <a href="javascript:;">后盾人</a>
            <a href="javascript:;">hdcms</a>
        </nav>
        <section>1</section>
        <section>2</section>
    </main>

    <main class="tab2">
        <nav>
            <a href="javascript:;">后盾人</a>
            <a href="javascript:;">hdcms</a>
        </nav>
        <section>1</section>
        <section>2</section>
    </main>
</body>
</html>
<script>
    //使用call/apply制作选项卡
    //继承工厂
    function extend(sub,sup){
        sub.prototype = Object.create(sup.prototype);
        sub.prototype.constructor = sub;
    }

    //动作类
    function Animation(){}

    //显示元素
    Animation.prototype.show = function(){
        this.style.display = "block";
    }

    //隐藏元素
    Animation.prototype.hide = function(){
        this.style.display = "none";
    }

    //改变匀速集合的背景
    Animation.prototype.background = function(color){
        this.style.background = color;
    }


    //需要给选项卡定义一个选项卡类
    function Tab(tab){
        this.tab = tab;
        this.links = null;
        this.sections = null;
    }

    //给选项卡添加动作
    extend(Tab,Animation);
    //定义所有的方法  都是预作准备
    Tab.prototype.run = function(){
        this.links = this.tab.querySelectorAll("a");
        this.sections = this.tab.querySelectorAll("section");
        //给当前的tab添加事件
        this.bindEvent();
        this.action(0);
    };

    //绑定事件
    Tab.prototype.bindEvent = function(){
        this.links.forEach((el,i) => {
            el.addEventListener("click",() => {
                this.reset();
                this.action(i);
            });
        });
    }
    

    //点击后触发动作
    Tab.prototype.action = function(i){
        this.background.call(this.links[i],"#e67e22");
        this.show.call(this.sections[i]);
    }

    //重置links与action
    Tab.prototype.reset = function(){
        this.links.forEach((el,i) => {
            this.background.call(el,"#95a5a6");
            this.hide.call(this.sections[i]);
        });
    }


    new Tab(document.querySelector(".tab1")).run();
    new Tab(document.querySelector(".tab2")).run();


    
    
</script>